<template>
  <Card class="de_box">
    <template #title>
      <h1 class="de_title">{{ detailList.list[0].title }}</h1>
    </template>
    <template #content>
      <div class="de_time">
        {{ detailList.list[0].date }}
        <ForIcon
          :icon="{ src: hot, text: detailList.list[0].hot, color: '#666' }"
        />
      </div>
      <audio  ref="audio" class="audio" controls :src="Mp3" preload="metadata">
        您的浏览器不支持音频播放
      </audio>
      <!-- 副标题位置 -->
      <div class="fu_title">
        {{ detailList.list[0].desc }}
      </div>
      <div v-for="item,index in detailList.list[0].content">
        <DetailTitle>
          <template #title>{{ item.title }}</template>
        </DetailTitle>
        <AticalDetail>
          <template #content> 
            <component :is="currentComponent"></component>  
            <!-- <span v-html="item.content"></span> -->
          </template>
          <template #img>
            <el-image v-if="item.img" class="ac_img" :src="'../../src/assets/img/'+ item.img+'.png'" lazy />
          </template>
        </AticalDetail>
      </div>
    </template>
  </Card>
</template>

<script lang="ts" setup>
import Card from "@/components/Card.vue";
import Mp3 from "@/assets/mp3/one.mp3";
import ForIcon from "@/components/ForIcon.vue";
import hot from "@/assets/svg/hot.svg";
import DetailTitle from "@/components/DetailTitle.vue";
import AticalDetail from "@/components/AticalDetail.vue";
import { ref, toRaw } from "vue";
import { useStore } from "vuex";
import { BlogDetail } from "@/store/modules/blogDetail";
import test from "../test/index.vue"
const store = useStore();
const detailList = ref<BlogDetail>([]);
detailList.value = toRaw(store.getters.getBlogDetail);


const currentComponent = ref(test)
</script>
<style lang="scss" scoped>
.de_box {
  width: 75%;
  color: #52527b;
  text-align: center;
  .de_title {
    margin: 20px 0px;
  }
  .audio {
    width: 80%;
  }
  .de_time {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
  }
  .fu_title {
    display: flex;
    margin: 16px 0px;
    justify-content: center;
    color: #666;
  }
}


</style>
